<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <title>Lightbox Plugins</title>
    <link rel="stylesheet" href="css/lightbox.css">
</head>
<body style="height:1500px;">

<!--[if lte IE 6]> 
<script src="Js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script> 
<script type="text/javascript"> 
DD_belatedPNG.fix('#J-lightbox-mask,#J-lightbox-popup .lightbox-pic-view .lightbox-btn,#J-lightbox-popup .lightbox-pic-caption,#J-lightbox-popup .lightbox-pic-caption .lightbox-roate-btn span'); 
/* 将 .png_bg 改成你应用了透明PNG的CSS选择器*/ 
</script> 
<![endif]--> 


 class="J-lightbox" 这个元素启用lightbox <br>
 data-role="lightbox" 这个元素启用lightbox <br>
 data-source="img/1-1.jpg" 原图地址 <br>
 data-id="dasf" 图片唯一标识 <br>
 data-caption="123456" 当前图片描述文字 <br>
 data-group="group-1"  表示当前是否属于同一组 <br>

<h1>1组图片</h1>
<div>
    <img class="J-lightbox" data-role="lightbox" data-source="img/1-1.jpg" data-caption="123456" data-group="group-1" data-id="dasf" src="img/1-1.jpg"width="100" height="100">
    <img class="J-lightbox" data-role="lightbox" data-source="img/1-2.jpg" data-caption="123456" data-group="group-1" data-id="ghfad" src="img/1-2.jpg"width="100" height="100">
    <img class="J-lightbox" data-role="lightbox" data-source="img/1-3.jpg" data-caption="123456" data-group="group-1" data-id="eqwr" src="img/1-3.jpg"width="100" height="100">
    <img class="J-lightbox" data-role="lightbox" data-source="img/1-4.jpg" data-caption="123456" data-group="group-1" data-id="fsgfad" src="img/1-4.jpg"width="100" height="100">
    <img class="J-lightbox" data-role="lightbox" data-source="img/1-5.jpg" data-caption="123456" data-group="group-1" data-id="hgfda" src="img/1-5.jpg"width="100" height="100">
</div>
<h1>2组图片</h1>
<div>
    <img class="J-lightbox" data-role="lightbox" data-source="img/2-1.jpg" data-caption="123456" data-group="group-2" data-id="kiudf" src="img/2-1.jpg"width="100" height="100">    
</div>
</body>
<script src="../../js/jquery.min.js"></script>
<script src="js/jquery.lightbox.js"></script>
<script>
$(function(){
    var lightbox = new Lightbox({
        speed:'fast',
        maxWidth:900,
        maxHeight:600,
        maskOpacity:0.5
    });
})
</script>
</html>